<template>
	<view class="nft_order_tabs_list">
		<view class="header">
			<view class="header_tabs">
				<view class="left">
					<uni-icons color="black" size="28" type="left" />
				</view>
				<view class="tabs">
					<view
						class="tabs_item_title"
						v-for="(item, index) in orderTypes"
						:key="index"
						@click="
							orderType = item.value;
							orderStatus = 0;
						"
					>
						{{ item.label }}
						<view class="line" :class="{ active: item.value === orderType }"></view>
					</view>
				</view>
				<view class="right"></view>
			</view>

			<scroll-view class="order_status_scroll" scroll-x>
				<view class="order_status">
					<view class="state" :class="{ active: orderStatus === 0 }" @click="orderStatus = 0">全部</view>
					<view
						v-for="(state, index) in orderStatusList"
						:key="index"
						class="state"
						:class="{ active: orderStatus === state.value }"
						@click="orderStatus = state.value"
					>
						{{ state.label }}
					</view>
					<view class="placeholder"></view>
				</view>
			</scroll-view>
		</view>

		<view class="order_list">
			<scroll-view class="order_list_scroll" scroll-y>
				<view class="order_list_main">
					<view v-if="orderListFilter.length === 0" class="no_data">
						<image src="@/static/market/no_data.png" mode="widthFix" />
						目前暂无数据
					</view>
					<OrderItem v-for="(order, index) in orderListFilter" :key="index * order.status * order.status" :order="order" showAllBid />
					<view v-if="orderListFilter.length" class="no_more">---没有更多---</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import OrderItem from "./components/order/item.vue";

export default {
	components: {
		OrderItem,
	},
	data() {
		return {
			orderType: 1,
			orderTypes: [
				{
					label: "购买",
					value: 1,
					status: [
						{
							label: "已锁定",
							value: 5,
						},
						{
							label: "已支付",
							value: 10,
						},
						{
							label: "已完成",
							value: 1,
						},
						{
							label: "已取消",
							value: 2,
						},
					],

					types: [1, 2, 5, 9, 10],
				},
				{
					label: "寄售",
					value: 2,
					status: [
						{
							label: "寄售中",
							value: 6,
						},
						{
							label: "已完成",
							value: 1,
						},
						{
							label: "已取消",
							value: 2,
						},
					],
					types: [1, 2, 6],
				},
				{
					label: "求购",
					value: 3,
					status: [
						{
							label: "求购中",
							value: 7,
						},
						{
							label: "已完成",
							value: 1,
						},
						{
							label: "已取消",
							value: 2,
						},
					],
					types: [1, 2, 7],
				},
				{
					label: "出价",
					value: 4,
					status: [
						{
							label: "出价中",
							value: 8,
						},
						{
							label: "已完成",
							value: 1,
						},
						{
							label: "已取消",
							value: 2,
						},
					],
					types: [1, 2, 8],
				},
			],
			orderStatus: 0,

			orderList: [
				{
					status: 1,
				},
				{
					status: 2,
				},
				{
					status: 5,
				},
				{
					status: 6,
				},
				{
					status: 7,
				},
				{
					status: 8,
					hightest: false,
				},
				{
					status: 8,
					hightest: true,
				},
				{
					status: 9,
				},
				{
					status: 10,
					isOwner: false,
				},
				{
					status: 10,
					isOwner: true,
				},
			],
		};
	},

	computed: {
		orderFilter() {
			return this.orderTypes.find((item) => item.value === this.orderType);
		},
		orderStatusList() {
			return this.orderFilter.status;
		},

		orderListFilter() {
			return this.orderList
				.filter(({ status }) => this.orderFilter.types.includes(status))
				.filter(({ status }) => this.orderStatus === 0 || status === this.orderStatus);
		},
	},

	onLoad(option) {
		console.log("order list onload", option);
		const type = option.type;
		if (!type) {
			this.orderType = 1;
		} else {
			this.orderType = type - 0;
		}

		this.orderStatus = 0;
	},
};
</script>
<style lang="scss" scoped>
.nft_order_tabs_list {
	padding-top: var(--status-bar-height);

	.header {
		width: 100%;
		height: calc(88rpx + 90rpx);

		.left,
		.right {
			width: calc((100% - 436rpx) / 2);
			height: 88rpx;
			line-height: 88rpx;
		}

		.header_tabs {
			width: 100%;
			height: 88rpx;
			padding: 0 40rpx;

			display: flex;
			justify-content: space-between;
			align-items: center;

			.tabs {
				width: 436rpx;
				height: 60rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;

				.tabs_item_title {
					font-weight: 500;
					font-size: 16px;
					color: black;

					text-align: center;

					.line {
						width: 40rpx;
						height: 8rpx;
						border-radius: 4rpx;
						background-color: transparent;
						margin: 0 auto;
						&.active {
							background-color: #2359f8;
						}
					}
				}
			}
		}

		.order_status_scroll {
			width: 100%;
			height: 90rpx;
			padding: 0 0 0 40rpx;

			.order_status {
				width: max-content;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.state {
					width: max-content;
					height: 56rpx;
					border-radius: 28rpx;
					padding: 8rpx 24rpx;
					font-size: 28rpx;
					color: #999999;
					background-color: #eeeeee;
					margin-right: 30rpx;

					&.active {
						background-color: #2359f8;
						color: white;
					}
				}

				.placeholder {
					width: 56rpx;
					height: 56rpx;
				}
			}
		}
	}

	.order_list {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 88rpx - 90rpx);
		background-color: #f4f4f4;
		padding: 20rpx 40rpx;

		.order_list_scroll {
			width: 100%;
			height: 100%;

			.order_list_main {
				width: 100%;
				height: max-content;

				.no_data {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-direction: column;

					margin-top: 40%;

					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					text-align: center;

					image {
						width: 300rpx;
					}
				}

				.no_more {
					font-weight: 400;
					font-size: 24rpx;
					text-align: center;
					margin: 30rpx auto;
					color: #888888;
				}
			}
		}
	}
}
</style>
